<cd-rgw-multisite-tabs></cd-rgw-multisite-tabs>
<div>
  <cd-alert-panel *ngIf="!rgwModuleStatus"
                  type="info"
                  spacingClass="mb-3"
                  class="d-flex align-items-center"
                  i18n>In order to access the import/export feature, the rgw module must be enabled
    <button class="btn btn-light mx-2"
            type="button"
            (click)="enableRgwModule()">Enable</button>
  </cd-alert-panel>
  <cd-alert-panel   *ngIf="restartGatewayMessage"
                    type="warning"
                    spacingClass="mb-3"
                    i18n>Please restart all Ceph Object Gateway instances in all zones to ensure consistent multisite configuration updates.
    <a class="text-decoration-underline"
       routerLink="/services">
       Cluster->Services</a>
  </cd-alert-panel>
  <cd-table-actions class="btn-group mb-4 me-2"
                    [permission]="permission"
                    [selection]="selection"
                    [tableActions]="multisiteReplicationActions">
  </cd-table-actions>
  <cd-table-actions *ngIf="showMigrateAndReplicationActions"
                    class="btn-group mb-4 me-2 secondary"
                    [permission]="permission"
                    [btnColor]="'light'"
                    [selection]="selection"
                    [tableActions]="migrateTableAction">
  </cd-table-actions>
  <cd-table-actions *ngIf="!showMigrateAndReplicationActions"
                    class="btn-group mb-4 me-2"
                    [permission]="permission"
                    [selection]="selection"
                    [tableActions]="createTableActions"
                    [primaryDropDown]="true">
  </cd-table-actions>
  <cd-table-actions class="btn-group mb-4 me-2"
                    [permission]="permission"
                    [btnColor]="'light'"
                    [selection]="selection"
                    [tableActions]="importAction">
  </cd-table-actions>
  <cd-table-actions class="btn-group mb-4 me-2"
                    [permission]="permission"
                    [btnColor]="'light'"
                    [selection]="selection"
                    [tableActions]="exportAction">
  </cd-table-actions>
</div>
<div class="card">
  <div class="card-header"
       i18n>Topology Viewer
  </div>
  <div class="row">
    <div class="col-sm-6 col-lg-6 tree-container">
      <i *ngIf="loadingIndicator"
         [ngClass]="[icons.large, icons.spinner, icons.spin]"></i>
      <tree-root #tree
                 [nodes]="nodes"
                 [options]="treeOptions"
                 (updateData)="onUpdateData()">
        <ng-template #treeNodeTemplate
                     let-node>
          <span *ngIf="node.data.name"
                class="me-3">
            <span *ngIf="(node.data.show_warning)">
              <i  class="text-danger"
                  i18n-title
                  [title]="node.data.warning_message"
                  [ngClass]="icons.danger"></i>
            </span>
            <i [ngClass]="node.data.icon"></i>
            {{ node.data.name }}
          </span>
          <span class="badge badge-success me-2"
                *ngIf="node.data.is_default">
              default
          </span>
          <span class="badge badge-warning me-2"
                *ngIf="node.data.is_master"> master </span>
          <span class="badge badge-warning me-2"
                *ngIf="node.data.secondary_zone">
            secondary-zone
          </span>
          <div class="btn-group align-inline-btns"
               *ngIf="node.isFocused"
               role="group">
            <div [title]="editTitle"
                 i18n-title>
              <button type="button"
                      class="btn btn-light dropdown-toggle-split ms-1"
                      (click)="openModal(node, true)"
                      [disabled]="getDisable() || node.data.secondary_zone">
                <i [ngClass]="[icons.edit]"></i>
              </button>
            </div>
            <div [title]="deleteTitle"
                 i18n-title>
              <button type="button"
                      class="btn btn-light ms-1"
                      [disabled]="isDeleteDisabled(node) || node.data.secondary_zone"
                      (click)="delete(node)">
                <i [ngClass]="[icons.destroy]"></i>
              </button>
            </div>
          </div>
        </ng-template>
      </tree-root>
    </div>
    <div class="col-sm-6 col-lg-6 metadata"
         *ngIf="metadata">
      <legend>{{ metadataTitle }}</legend>
      <div>
        <cd-table-key-value [data]="metadata">
        </cd-table-key-value>
      </div>
    </div>
  </div>
</div>

<router-outlet name="modal"></router-outlet>
